import React from 'react';
import PropTypes from 'prop-types';

const AddColorForm = ({onNewColor=f=>f})=>{
    let _title , _color;
    const submit = (e) => {
        e.preventDefault();
        onNewColor(_title.value, _color.value);
        _title.value = '';
        _color.value = '#000000';
        _title.focus();
    }
    return  <div id="contain">
                <form action="" onSubmit={submit}>
                    <input type="text" ref={input => _title = input} placeholder="color title..." required />
                    <input type="color" ref={input => _color = input} required />
                    <button>ADD</button>
                </form>
        </div>
};

export default AddColorForm;